<html lang="zh-cn" xmlns：th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客房概况</title>
    <!-- Bootstrap 3.3.7 -->

    <link th:href="@{https://fonts.googleapis.com/css?family=Work+Sans:300,400,700}" rel="stylesheet">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.min.css}">

    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/html/css/animate.css}">
    <link rel="stylesheet" th:href="@{/html/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/flaticon/font/flaticon.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/html/css/bootstrap-datepicker.css}">
    <link rel="stylesheet" th:href="@{/html/css/select2.css}">
    <link rel="stylesheet" th:href="@{/html/css/helpers.css}">
    <link rel="stylesheet" th:href="@{/html/css/style.css}">


</head>
<body>
<!-- 导航 nav -->
<nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar"
     id="probootstrap-navbar">
    <div class="container">
        <a class="navbar-brand" style="font-size: 42px; height: 100px;"
           href="/">
            富丽堂皇大宾馆
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#probootstrap-menu" aria-controls="probootstrap-menu"
            aria-expanded="false" aria-label="Toggle navigation">
        <span><i class="ion-navicon"></i></span>
    </button>
    <div class="collapse navbar-collapse" id="probootstrap-menu">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item" th:each="nav:${navList}"><a class="nav-link" style="font-size:20px;" th:href="${nav.url}" th:text="${nav.name}">
            </a></li>
            <li th:if="${#strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/toLogin}">登录/注册</a></li>

            <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/mine}" th:text="${session.loginName}"></a></li>
            <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/logout}"  th:text="[退出]"></a></li>
            <!--<li class="nav-item"><a class="nav-link"
                                style="font-size: 20px;" href="user/mine?userName=${Session.username}">-->
        </a></li>
        </li>
    </ul>
</div>
</div>
</nav>
<!-- 导航 nav End -->
<section class="probootstrap-cover overflow-hidden relative" th:style="'background-image: url('+@{/html/images/bg_1.jpg}+');'" data-stellar-background-ratio="0.5" id="section-home">

    <div class="container">
        <div class="row align-items-center">
            <div class="col-md">
                <div class="col-md-6" th:each="room:${roomList}">

                    <div
                            class="media probootstrap-media d-flex align-items-stretch mb-4 probootstrap-animate">
                        <div class="probootstrap-media-image"
                             th:style="'background-image: url('+@{${room.image}}+')'">
                        </div>
                        <span class="media-body" id="hoverroom">
                                    <a th:href="@{/hotel/detail?(id=${room.id})}" class="mb-3">
                                        <h5 class="mb-3" th:text="${room.type}">
                                            ${room.type}
                                        </h5>
                                    </a>
                                    <h6>
                                        <strong>建筑面积：</strong>
                                        <span th:text="${room.area}">${room.area}</span>m
                                        <sup>2</sup>
                                    </h6>
                                    <h6>
                                        <strong>床型：</strong>
                                         <span th:text="${room.bed}">${room.bed}</span>
                                    </h6>
                                    <h6>
                                        <strong>窗户：</strong>

                                        <span th:text="${room.havewindows}"> ${room.havewindows}</span>
                                    </h6>
                                    <h6>
                                        <strong>加床：</strong>

                                        <span th:text="${room.addbed}">${room.addbed}</span>
                                    </h6>
                                    <h6>
                                        <strong>早餐：</strong>

                                        <span th:text="${room.havebreakfast}">${room.havebreakfast}</span>
                                    </h6>
                                    <span th:if="${room.rcount} != 0">
                                    <a type="button" class="btn btn-info bookStyle"
                                       style="padding: 0;" th:href="@{/hotel/user/book?(id=${room.id })}"
                                    >预约</a>
                                    </span>
                                    <span
                                            style="padding: 0; color: red;" th:if="${room.rcount} ==0"
                                    >订满</span>
                                </span>
                    </div>
                </div>


        </div>
    </div>

</section>


                <!-- END section -->
            </div>
        </div>
    </div>
</section>




<!-- 页脚 footer -->
<footer>
    <div class="container">
        <div class="col-md-12 text-center">
            <p class="probootstrap_font-14" style="color: black;">闽ICP备xxxxxxxx号 联系电话：xxx-xxxxxxxx </p>
            <p class="probootstrap_font-14" style="color: black;">富丽堂皇大酒店 版权所有 COPYRIGHT &copy; 2020. The Grand Hotel All Rights Reserved </p>
        </div>

    </div>
</footer>
<!-- 页脚 footer end -->


<script th:src="@{/html/js/jquery.min.js}"></script>

<script th:src="@{/html/js/popper.min.js}"></script>
<script th:src="@{/html/js/bootstrap.min.js}"></script>
<script th:src="@{/html/js/owl.carousel.min.js}"></script>

<script th:src="@{/html/js/bootstrap-datepicker.js}"></script>
<script th:src="@{/html/js/jquery.waypoints.min.js}"></script>
<script th:src="@{/html/js/jquery.easing.1.3.js}"></script>

<script th:src="@{/html/js/select2.min.js}"></script>

<script th:src="@{/html/js/main.js}"></script>


<script type="text/javascript">
<!--    判断是否还有房间，有就可以预约，没有就提示-->
    function checkrcount() {

    }
</script>

<script type="text/javascript">
    function logout() {
        window.location.href = "logout"
    }
</script>
</body>
</html>